<template>
  <div>
    <el-steps :active="active"
              finish-status="success">
      <el-step title="犬主信息"></el-step>
      <el-step title="犬只信息"></el-step>
      <el-step title="确认提交"></el-step>
    </el-steps>

    <!-- 先录入用户个人信息 -->
    <div v-if="person_info"
         style="width:650px;margin-left:15%">
      <el-form ref="form"
               :model="form"
               label-width="120px">
        <el-form-item label="证件正面照片"
                      style="margin-top:15%">

          <!-- 证件正面照片 -->
          <el-upload class="avatar-uploader"
                     action="http://localhost:5051/image/upload"
                     :show-file-list="false"
                     :on-success="handleIcdImage"
                     style="margin-left:40%;margin-top:-13%">
            <img v-if="form.icd_image"
                 :src="form.icd_image"
                 class="avatar" />
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="本人半身照片"
                      style="margin-top:15%">
          <!-- 本人半身照片 -->
          <el-upload class="avatar-uploader"
                     action="http://localhost:5051/image/upload"
                     :show-file-list="false"
                     :on-success="handlePersonImage"
                     style="margin-left:40%;margin-top:-13%">
            <img v-if="form.person_image"
                 :src="form.person_image"
                 class="avatar" />
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="犬主姓名">
          <el-input v-model="form.name"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="证件类型">
          <template>
            <el-input v-model="form.ID_type"
                      disabled
                      style="margin-left:40%;width:42.5%"></el-input>
          </template>
        </el-form-item>

        <el-form-item label="证件号码">
          <el-input v-model="form.icd"
                    style="margin-left:40%;width:42.5%"
                    placeholder="身份证号码"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-input v-model="form.sex"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="民族">
          <el-input v-model="form.ethnic"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="户籍地址">
          <el-input v-model="form.domicile_address"
                    style="margin-left:40%;width:42.5%"
                    placeholder="身份证上的地址"></el-input>
        </el-form-item>

        <el-form-item label="联系电话">
          <el-input v-model="form.tel"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="现住地">
          <el-input v-model="form.now_address"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="详细地址">
          <el-input v-model="form.detailed_address"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="证明材料"
                      style="margin-top:15%">
          <!-- 证明材料的照片 -->
          <el-upload class="avatar-uploader"
                     action="http://localhost:5051/image/upload"
                     :show-file-list="false"
                     :on-success="handleProveImage"
                     style="margin-left:40%;margin-top:-13%">
            <img v-if="form.supporting_material"
                 :src="form.supporting_material"
                 class="avatar" />
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <h3 style="margin-left:15%;color:red">个人养犬必须提供有效的居住正面材料，租房合同或者房产证照片</h3>
      </el-form>
    </div>

    <!-- 在录入用户宠物信息 -->
    <div v-if="pet_info"
         style="width:650px;margin-left:15%;margin-top:5%">
      <el-form ref="form"
               :model="form"
               label-width="120px"
               size="mini">
        <el-form-item label="犬名">
          <el-input v-model="form.dog_name"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="犬种">
          <el-input v-model="form.dog_type"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-input v-model="form.dog_sex"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="犬只体重(kg)">
          <el-input v-model="form.dog_weight"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="犬只肩高(cm)">
          <el-input v-model="form.dog_heigh"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="犬只体长(cm)">
          <el-input v-model="form.dog_long"
                    style="margin-left:40%;width:42.5%"></el-input>
        </el-form-item>

        <el-form-item label="犬只正面照片"
                      style="margin-top:15%">
          <!-- 犬只正面的照片 -->
          <el-upload class="avatar-uploader"
                     action="http://localhost:5051/image/upload"
                     :show-file-list="false"
                     :on-success="handlePositiveImage"
                     style="margin-left:40%;margin-top:-13%">
            <img v-if="form.dog_positive_image"
                 :src="form.dog_positive_image"
                 class="avatar" />
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="犬只侧面照片"
                      style="margin-top:15%">
          <!-- 犬只侧面的照片 -->
          <el-upload class="avatar-uploader"
                     action="http://localhost:5051/image/upload"
                     :show-file-list="false"
                     :on-success="handleSideImage"
                     style="margin-left:40%;margin-top:-13%">
            <img v-if="form.dog_side_image"
                 :src="form.dog_side_image"
                 class="avatar" />
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="regulation">
      <h2 style="margin-left:35%;margin-top:3%;color:blue">养犬管理条例</h2>
      <div style="margin-top:3%">
        <div v-for="reg in regulations">
          <h4 style="margin-left:20%;width:550px">{{reg}}</h4>
        </div>
      </div>

    </div>

    <div v-if="regulation"
         style="margin-left:35%">
      <template>
        <!-- `checked` 为 true 或 false -->
        <el-checkbox v-model="checked">我已阅读养犬管理条例并且同意遵守</el-checkbox>
      </template>
    </div>

    <div>
      <el-button style="margin-top: 3%;margin-left:18%"
                 @click="pre">上一步</el-button>
      <el-button v-if="nextstep"
                 style="margin-top: 3%;margin-left:35%"
                 @click="next">下一步</el-button>
      <el-button v-if="ensure"
                 style="margin-top: 3%;margin-left:35%"
                 @click="submit">提交</el-button>
    </div>

  </div>
</template>
<script>
import axios from "axios";
import common from "../../../assets/commons"
export default {
  data () {
    return {
      active: 0,
      //
      person_info: true,
      //
      pet_info: false,
      //
      regulation: false,
      //确认阅读条例
      checked: false,
      //显示确认提交按钮
      ensure: false,
      //显示下一步的按钮
      nextstep: true,
      form: {
        //证件照
        icd_image: '',
        //本人半身照
        person_image: '',
        //证件类型
        ID_type: "身份证",
        //犬主姓名
        name: '',
        //证件号码
        icd: '',
        //性别
        sex: '',
        //民族
        ethnic: '',
        //户籍地址
        domicile_address: '',
        //联系电话
        tel: '',
        //现住地
        now_address: '',
        //详细地址
        detailed_address: '',
        //证明材料
        supporting_material: '',
        //犬名
        dog_name: '',
        //犬种
        dog_type: '',
        //性别
        dog_sex: '',
        //狗狗体重
        dog_weight: '',
        //狗狗肩高
        dog_heigh: '',
        //狗狗体长
        dog_long: '',
        //狗狗正面照片
        dog_positive_image: '',
        //狗狗侧面照片
        dog_side_image: '',
        //用户id
        u_id: this.$store.state.userid,
      },
      regulations: [
        "第一条:  为加强养犬管理，维护市容环境和公共秩序，保障公民健康和人身安全，根据有关法律、法规的规定，结合成都市实际，制定本条例。",
        "第二条:  在本市行政区域内的养犬行为及对养犬的管理活动，适用本条例。警用、搜救犬只以及动物园、科研机构等单位因特定工作需要饲养犬只的，不适用本条例。",
        "第三条:  养犬管理实行管限结合、基层组织参与、社会公众监督、养犬人自律的原则。",
        "第四条:  公安机关可以委托符合法律、法规规定条件的组织实施养犬管理的具体事务，具体办法由市人民政府制定。",
        "第五条:  本市行政区域内实行犬只强制免疫制度。养犬人应当将犬只送动物疫病预防控制机构或者取得资质的动物诊疗机构进行狂犬病等疾病的免疫，取得犬只免疫证明。"
      ]
    }
  },
  methods: {
    // 下一步
    next () {
      //注意:这里不能使用 this.active++
      let count = this.active + 1;
      console.log(count);
      if (count == 1) {
        //下标
        this.active = 1;
        //将个人信息的div设置为false
        this.person_info = false;
        //将宠物信息的div设置为false
        this.pet_info = true;
        //将管理条例的div设置为false
        this.regulation = false;
      } else if (count >= 2) {
        console.log(this.checked);
        this.active = 2;
        this.regulation = true;
        this.person_info = false;
        this.pet_info = false;
        //当处于管理条例的时候,将下一页的button改成提交button
        this.nextstep = false;
        //当处于管理条例的时候,将下一页的button改成提交button
        this.ensure = true;
      }

    },
    //上一步
    pre () {
      //注意:这里不能使用 this.active--
      let count = this.active - 1;
      if (count <= 0) {
        this.active = 0;
        this.person_info = true;
        this.pet_info = false;
        this.regulation = false;
        console.log(this.active);
      } else if (count == 1) {
        this.active = 1;
        this.person_info = false;
        this.pet_info = true;
        this.regulation = false;
        this.nextstep = true;
        this.ensure = false;
      }
    },
    //上传身份证照片成功的回调函数
    handleIcdImage (res, file) {
      console.log(res);
      this.form.icd_image = res.data
    },
    //上传半身照的回调函数
    handlePersonImage (res, file) {
      console.log(res);
      this.form.person_image = res.data
    },
    //上传证明材料的回调函数
    handleProveImage (res, file) {
      console.log(res);
      this.form.supporting_material = res.data
    },
    //上传狗狗正面照片的回调函数
    handlePositiveImage (res, file) {
      console.log(res);
      this.form.dog_positive_image = res.data
    },
    //上传狗狗侧面照片的回调函数
    handleSideImage (res, file) {
      console.log(res);
      this.form.dog_side_image = res.data
    },
    //提交信息
    submit () {
      if (this.checked == false) {
        alert("您未勾选养犬管理条例");
        return;
      }
      this.form.ID_type = "身份证";
      let applyForTable = this.form
      axios.post(common.baseUrl + "user/user/dogApplication", applyForTable).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.$confirm('您可以在"业务办理"中的"审批进度"中通过"养犬审批进度"查看具体详情', '申请成功', {
            type: 'warning',
            center: true
          })
        }
      })
    }
  },
  mounted () {

  },
  computed: {},
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #fffbfb;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
